﻿@model MezmurStore2.Models.Album
@{
    ViewBag.Title = "Edit";
}
@{
    var geners = new List<SelectListItem>
    {
        new SelectListItem() { Value = "Misgana", Text =  "Misgana"},
        new SelectListItem() { Value = "Niseha", Text = "Niseha"},
        new SelectListItem() { Value = "Awdamet", Text = "Awdamet"},
        new SelectListItem() { Value = "Serg", Text = "Serg"},
        new SelectListItem() { Value = "Other", Text = "Other"},
    };
}
<h2>
    Edit</h2>
<br />
<h3>
    Make changes to the album that you have uploaded.</h3>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
	
@*<script src="@Url.Content("~/mediaelement/build/jquery.js")" type="text/javascript"></script>	*@
<script src="@Url.Content("~/mediaelement/build/mediaelement-and-player.min.js")" type="text/javascript"></script>



<!-- Player code -->
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend style="color: White">Album</legend>
        @Html.HiddenFor(model => model.Id)
        @Html.HiddenFor(model => model.OwnerUserId)
        <br />
        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>
        <br />
        <div class="editor-label">
            @Html.LabelFor(model => model.Gener)
        </div>
        <div class="editor-field">
            @Html.DropDownList("Gener", geners);
            @Html.ValidationMessageFor(model => model.Gener)
        </div>
        <br />
        <div class="editor-label">
            @Html.LabelFor(model => model.Poster)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Poster)
            @Html.ValidationMessageFor(model => model.Poster)
        </div>
        <br />
        <div class="editor-label">
            @Html.LabelFor(model => model.ReleaseDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ReleaseDate)
            @Html.ValidationMessageFor(model => model.ReleaseDate)
        </div>
    </fieldset>
    
    if (Model.Tracks != null && Model.Tracks.Count > 0)
    {
    <br />
    <fieldset>
        <legend style="color: White">Tracks</legend>
        <table border="0" cellspacing="10">
            <tr>
                <th>
                    Track Title
                </th>
                <th>
                    Artist
                </th>
                <th>
                    Play
                </th>
                <th>
                    Delete
                </th>
            </tr>
            @for (int i = 0; i < Model.Tracks.Count; i++)
            {
                @Html.HiddenFor(modelItem => Model.Tracks[i].Id)
                @Html.HiddenFor(modelItem => Model.Tracks[i].FilePath)
                @Html.HiddenFor(modelItem => Model.Tracks[i].FileSize)
                <tr>
                    <td>
                        @Html.EditorFor(modelItem => Model.Tracks[i].Name)
                    </td>
                    <td>
                        @Html.EditorFor(modelItem => Model.Tracks[i].ArtistName)
                    </td>
                    <td>
                    <audio id="@string.Format("player_{0}", i)" src="@Model.Tracks[i].FilePath" type="audio/mp3" controls="controls">		
                    <script>
                        $('audio,video').mediaelementplayer();
                    </script>
                    </td>
                    <td>
                         @Html.ActionLink("Delete", "DeleteTrack", new { @Model.Id, trackId = @Model.Tracks[i].Id })
                    </td>
                </tr>
                
            }
        </table>
    </fieldset>
    }
    else
    {
    <h3>
        You dont have any tracks uploaded for this album.</h3>        
    }
    
    <br />
    
    <input id="file_upload" name="file_upload" type="file" />
    <input id="uploadLink" onclick="$('#file_upload').uploadifyUpload();" type="button"
        value="Upload now" />

    <br />    
    <p>
        <input type="submit" value="Save" />
    </p>
    
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $("#uploadLink").hide();
        $("#file_upload").uploadify(
    {
        'swf': '@Url.Content("~/Scripts/uploadify/uploadify.swf")',
        'uploader': '@Url.Action("UploadTrack")',
        'formData': { albumId: '@Model.Id' },
        'fileObjName': 'file',
        'buttonText': 'Upload Tracks',
        'multi': true,
        'width': 250,
        'sizeLimit': 200000000,
        'simUploadLimit': 1,
        'auto': true,
        'removeCompleted': false,
        'onUploadError': function (file, errorCode, errorMsg, errorString) {
            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
        },
        'onQueueComplete': function (queueData) {
            alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
            window.location = "/AlbumManager/Edit/" + "@Model.Id";
        }
        
    });
    });
</script>
